<template>
  <div class="welcome-container">
    <!-- 页面标题区域 -->
    <div class="page-header">
      <h1>欢迎回来，管理员</h1>
      <p class="sub-title">
        今天是 {{ today | formatDate }}，祝您工作顺利！
      </p>
    </div>

    <!-- 统计卡片区域 -->
    <el-row :gutter="20" class="stats-row">
      <el-col :span="6">
        <el-card class="stat-card" hover-shadow>
          <div class="stat-content">
            <div class="stat-info">
              <p class="stat-label">总用户数</p>
              <h3 class="stat-value">2,458</h3>
            </div>
            <div class="stat-icon user-icon">
              <i class="el-icon-user"></i>
            </div>
          </div>
          <div class="stat-trend">
            <span class="trend-up">
              <i class="el-icon-arrow-up"></i> 12.5%
            </span>
            <span class="trend-desc">较上月</span>
          </div>
        </el-card>
      </el-col>

      <el-col :span="6">
        <el-card class="stat-card" hover-shadow>
          <div class="stat-content">
            <div class="stat-info">
              <p class="stat-label">今日活跃</p>
              <h3 class="stat-value">326</h3>
            </div>
            <div class="stat-icon active-icon">
              <i class="el-icon-refresh"></i>
            </div>
          </div>
          <div class="stat-trend">
            <span class="trend-up">
              <i class="el-icon-arrow-up"></i> 8.2%
            </span>
            <span class="trend-desc">较昨日</span>
          </div>
        </el-card>
      </el-col>

      <el-col :span="6">
        <el-card class="stat-card" hover-shadow>
          <div class="stat-content">
            <div class="stat-info">
              <p class="stat-label">系统消息</p>
              <h3 class="stat-value">12</h3>
            </div>
            <div class="stat-icon msg-icon">
              <i class="el-icon-bell"></i>
            </div>
          </div>
          <div class="stat-trend">
            <span class="trend-down">
              <i class="el-icon-arrow-down"></i> 3.1%
            </span>
            <span class="trend-desc">较上周</span>
          </div>
        </el-card>
      </el-col>

      <el-col :span="6">
        <el-card class="stat-card" hover-shadow>
          <div class="stat-content">
            <div class="stat-info">
              <p class="stat-label">系统状态</p>
              <h3 class="stat-value">正常</h3>
            </div>
            <div class="stat-icon status-icon">
              <i class="el-icon-check-circle"></i>
            </div>
          </div>
          <div class="stat-trend">
            <span class="uptime">
              已运行 32 天
            </span>
          </div>
        </el-card>
      </el-col>
    </el-row>

    <!-- 快捷操作区域 -->
    <div class="quick-actions">
      <h2 class="section-title">快捷操作</h2>
      <el-row :gutter="20">
        <el-col :span="4" v-for="(action, index) in quickActions" :key="index">
          <div class="action-card" @click="handleAction(action)">
            <div class="action-icon" :style="{ backgroundColor: action.color }">
              <i :class="action.icon"></i>
            </div>
            <p class="action-name">{{ action.name }}</p>
          </div>
        </el-col>
      </el-row>
    </div>

    <!-- 最近动态区域 -->
    <div class="recent-activities">
      <h2 class="section-title">最近动态</h2>
      <el-card>
        <el-timeline>
          <el-timeline-item
              v-for="(activity, index) in recentActivities"
              :key="index"
              :timestamp="activity.time"
              placement="top"
          >
            <el-card>
              <h4>{{ activity.title }}</h4>
              <p>{{ activity.content }}</p>
            </el-card>
          </el-timeline-item>
        </el-timeline>
      </el-card>
    </div>
  </div>
</template>

<script>
export default {
  name: 'WelcomePage',
  data() {
    return {
      today: new Date(),
      quickActions: [
        { name: '用户管理', icon: 'el-icon-user', color: '#409eff', path: '/admin/user' },
        { name: '角色配置', icon: 'el-icon-s-custom', color: '#67c23a', path: '/role' },
        { name: '日志查看', icon: 'el-icon-document', color: '#e6a23c', path: '/log' },
        { name: '系统设置', icon: 'el-icon-setting', color: '#f56c6c', path: '/setting' },
        { name: '数据备份', icon: 'el-icon-download', color: '#909399', path: '/backup' },
        { name: '消息中心', icon: 'el-icon-bell', color: '#722ed1', path: '/message' }
      ],
      recentActivities: [
        {
          time: '今天 09:24',
          title: '系统更新完成',
          content: 'V2.3.0版本更新已完成，新增数据导出功能'
        },
        {
          time: '昨天 15:48',
          title: '用户操作提醒',
          content: 'admin修改了系统配置参数'
        },
        {
          time: '昨天 10:12',
          title: '新用户注册',
          content: '用户"张三"已完成注册并通过审核'
        },
        {
          time: '2023-06-15 16:30',
          title: '数据备份成功',
          content: '系统自动备份已完成，备份文件已保存'
        }
      ]
    }
  },
  filters: {
    formatDate(date) {
      const options = { year: 'numeric', month: 'long', day: 'numeric', weekday: 'long' };
      return new Date(date).toLocaleDateString('zh-CN', options);
    }
  },
  methods: {
    handleAction(action) {
      // 这里可以添加点击快捷操作的处理逻辑
      this.$message.success(`点击了${action.name}`);
      // 如果需要路由跳转，可以使用
      // this.$router.push(action.path);
      if (action.name === '用户管理'){
        this.$router.push("/admin/user");
      }
    }
  },
  mounted() {
    // 页面加载时的动画效果
    const cards = document.querySelectorAll('.stat-card, .action-card');
    cards.forEach((card, index) => {
      setTimeout(() => {
        card.classList.add('animate-in');
      }, 100 * index);
    });
  }
}
</script>

<style scoped>
.welcome-container {
  padding: 20px;
  background-color: #f5f7fa;
  min-height: calc(100vh - 60px);
}

.page-header {
  margin-bottom: 30px;
}

.page-header h1 {
  font-size: 28px;
  color: #333;
  margin-bottom: 10px;
}

.sub-title {
  font-size: 16px;
  color: #666;
  margin: 0;
}

.stats-row {
  margin-bottom: 30px;
}

.stat-card {
  transition: all 0.3s ease;
  opacity: 0;
  transform: translateY(20px);
}

.stat-card.animate-in {
  opacity: 1;
  transform: translateY(0);
}

.stat-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.stat-info .stat-label {
  color: #666;
  font-size: 14px;
  margin: 0 0 5px 0;
}

.stat-info .stat-value {
  font-size: 24px;
  font-weight: bold;
  color: #333;
  margin: 0;
}

.stat-icon {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 24px;
}

.user-icon {
  background-color: #409eff;
}

.active-icon {
  background-color: #67c23a;
}

.msg-icon {
  background-color: #e6a23c;
}

.status-icon {
  background-color: #f56c6c;
}

.stat-trend {
  display: flex;
  align-items: center;
  margin-top: 10px;
  font-size: 12px;
}

.trend-up {
  color: #67c23a;
  margin-right: 5px;
}

.trend-down {
  color: #f56c6c;
  margin-right: 5px;
}

.trend-desc {
  color: #999;
}

.uptime {
  color: #67c23a;
}

.section-title {
  font-size: 18px;
  color: #333;
  margin-bottom: 15px;
  padding-left: 5px;
  border-left: 3px solid #409eff;
}

.quick-actions {
  margin-bottom: 30px;
}

.action-card {
  background-color: white;
  border-radius: 8px;
  padding: 20px 10px;
  text-align: center;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
  opacity: 0;
  transform: translateY(20px);
}

.action-card.animate-in {
  opacity: 1;
  transform: translateY(0);
}

.action-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
}

.action-icon {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 15px;
  color: white;
  font-size: 28px;
}

.action-name {
  color: #333;
  font-size: 14px;
  margin: 0;
}

.recent-activities {
  margin-bottom: 30px;
}

.el-timeline {
  padding-left: 20px;
}

.el-timeline-item__timestamp {
  color: #666;
  font-size: 12px;
}
</style>
